<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab标签页</title>
	<style>
	* {margin: 0; padding: 0;}
	body {font-size: 14px;}
	.sy-tabs {width: 800px; height:300px; margin-left: 30px;}
	.sy-tabs-header { height: 40px; line-height:40px; }
	.sy-tabs-header-wrapper {height: 40px; float: left; font-size: 0; position: relative;}
	.sy-tabs-bar {position: absolute; left: 0; bottom: 0; height: 2px; background-color: blue; transform: translateX(0); transition: transform .2s cubic-bezier(.645,.045,.355,1);}
	.sy-tabs-header-item {display: inline-block; font-size: 14px; height: 100%; padding: 0 10px; cursor: pointer;}
	.sy-tabs-header-item:nth-child(2) {padding-left: 0;}
	.sy-tabs-header-item:last-child {padding-right: 0;}
	
	.sy-tabs-header-item.is-active {color: blue;}
	
	.sy-tabs-content .sy-tabs-content-item {display: none;}
	</style>
</head>
<body>
    <div class="sy-tabs">
		<div class="sy-tabs-header">
			<div class="sy-tabs-header-wrapper">
				<div class="sy-tabs-bar"></div>
				<div class="sy-tabs-header-item is-active">用户管理</div>
				<div class="sy-tabs-header-item">配置管理</div>
				<div class="sy-tabs-header-item">角色管理</div>
				<div class="sy-tabs-header-item">定时任务补偿</div>
			</div>
		</div>
		<div class="sy-tabs-content">
			<div class="sy-tabs-content-item">用户管理内容</div>
			<div class="sy-tabs-content-item">配置管理内容</div>
			<div class="sy-tabs-content-item">角色管理内容</div>
			<div class="sy-tabs-content-item">定时任务补偿内容</div>
		</div>
	</div>
	<script>
	let tabs = document.querySelectorAll('.sy-tabs-header-wrapper .sy-tabs-header-item')
	let tabContents = document.querySelectorAll('.sy-tabs-content .sy-tabs-content-item')
	let tabBar = document.querySelector('.sy-tabs-bar')
	
	tabs.forEach((tab, index) => {
		tab.addEventListener('click', function (e) {
			tabs.forEach(tabItem => tabItem.classList.remove('is-active'));
			tab.classList.add('is-active');
			
			tabContents.forEach(tabContent => tabContent.style.display = 'none');
			tabContents[index].style.display = 'block'
			
			let offset = 0;
			let tabSize = 0;
			
			[...tabs].every((tab, index) => {
				if (!tab.classList.contains('is-active')) {
					offset += tab.clientWidth;
					return true;
				} else {
					tabSize = tab.clientWidth;
					const tabStyles = window.getComputedStyle(tab);
					if (tabs.length > 1) {
						tabSize -= parseFloat(tabStyles.paddingLeft) + parseFloat(tabStyles.paddingRight);
					}
					offset += parseFloat(tabStyles.paddingLeft);
					return false;
				}
			})
			
			const transform = `translateX(${offset}px)`;
			tabBar.style.width = tabSize + 'px';
			tabBar.style.transform = transform;
		})
	})	
	tabContents[0].style.display = 'block';
	let tab0Styles = window.getComputedStyle(tabs[0]);
	tabBar.style.width = (parseFloat(tabs[0].offsetWidth) - parseFloat(tab0Styles.paddingRight)) + 'px';
	</script>
</body>
</html>